var ul = document.querySelector('ul');
var fenye = document.querySelector('.fenye');
var current = 1
requestData()
function requestData() {
    // 发送ajax请求获取商品列表数据
    sendAjax({
        url: 'http://localhost:8888/goods/list',
        data: {
            current
        },
        success: res => {
            console.log(res);
            var {code, list, total} = res;
            if(code === 1) {
                // 数据获取成功
                // 渲染
                var str = ''
                list.forEach(v => {
                    str += `
                        <li>
                            <a href="datail.html?id=${v.goods_id}">
                                <img src="${v.img_big_logo}" alt="">
                                <span class="price">￥${v.price}</span>
                                <br>
                                <span class="title">${v.title}</span>
                            </a>
                        </li>
                    `
                })
                ul.innerHTML = str
                // 根据当前数据和当前页动态渲染分页
                var pageStr = `
                    <div class="first" onclick="first()">首页</div>
                    <div class="prev" onclick="prev()">上一页</div>
                    <div class="list">
                `
                if(total<=5) {
                    // 1~总页数
                    pageStr += createP(1, total)

                } else {
                    if(current <= 3) {
                        pageStr += createP(1, 5)
                    } else if(current >= total - 2) {
                        pageStr += createP(total-4, total)
                    } else {
                        pageStr += createP(current-2, current+2)
                    }
                }
                pageStr += `
                    </div>
                    <div class="next" onclick="next(${total})">下一页</div>
                    <div class="last" onclick="last(${total})">尾页</div>
                `
                fenye.innerHTML = pageStr
            }
        }
    })
}
// 点击上一页的函数
function prev() {
    current--
    if(current < 1) {
        current = 1
        return
    }
    requestData()
}
// 点击首页的函数
function first() {
    if(current === 1) {
        return
    }
    current = 1
    requestData()
}
// 点击尾页的函数
function last(total) {
    if(current === total) {
        return
    }
    current = total
    requestData()
}
// 点击下一页的函数
function next(total) {
    current++
    if(current > total) {
        current = total
        return
    }
    requestData()
}
// 点击页码的函数
function toCurrent(i) {
    if(current === i) {
        return
    }
    current = i
    requestData()
}
// 创建页码p标签的函数
function createP(start, end) {
    var str = ''
    for(var i=start; i<=end; i++) {
        if(i === current) {
            str += `
                <p onclick="toCurrent(${i})" class="active">${i}</p>
            `
        } else {
            str += `
                <p onclick="toCurrent(${i})">${i}</p>
            `
        }
    }
    return str
}